@mixin textOneLine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-container{
    position: relative;
    padding: 60rpx 40rpx 0rpx;
    box-sizing: border-box;
    background: url(https://zhujinlong.gitee.io/leju-admin-2110/static/img/seat-top-bg.png) no-repeat;
    background-size: 100% 100%;
    height: 492rpx;
    // height: 292rpx;
    .navbar{
        display: flex;
        justify-content: space-between;
        padding-top: 10rpx;
       
        .cinema-name{
            font-family: PingFangSC-Medium;
            font-size: 32rpx;
            color: #FFFFFF;
            @include textOneLine;
        }
    }
    .movie-name{
        margin-top: 33rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        color: #FFFFFF;
    }
    .movie-info{
        display: flex;
        margin-top: 25rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        .time{
            width: 198rpx;
            height: 46rpx;
            opacity: 0.73;
            background: #33363D;
            border-radius: 10rpx;
            font-family: PingFangSC-Regular;
           
            text-align: center;
        }
        .type{
            height: 40rpx;
            opacity: 0.73;
            border: 2rpx solid #33363D;
            border-radius: 10rpx;
            margin-left: 20rpx;
            padding: 0 15rpx;

        }
    }
    .explain{
        margin-top: 42rpx;
        display: flex;
        justify-content: space-between;
        .item{
            display: flex;
            .square{
                width: 52rpx;
                height: 52rpx;
                border-radius: 12rpx;
                background: #909294;
                box-shadow: 0 4px 8px 0 rgba(76,41,49,0.54);
            }
            &:nth-of-type(2) > .square{
                background: #F9C34A;
                box-shadow: 0 4px 8px 0 rgba(76,41,49,0.54);
            }
            &:nth-of-type(3) > .square{
                background: #6548A9;
                box-shadow: 0 4px 8px 0 rgba(76,41,49,0.54);
            }
            .text{
                height: 52rpx;
                opacity: 0.78;
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #FFFFFF; 
                margin-left: 10rpx;
                line-height: 52rpx;
            }
        }
    }
    .title{
        position: absolute;
        left: 50%;
        bottom: -10rpx;
        transform: translateX(-50%);
        width: 250rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #33363d;
        opacity: 0.78;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;

    }
}

.seat-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .left{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40rpx;
        height: 624rpx;
        opacity: 0.62;
        background: #33363D;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.35);
        border-radius: 23rpx;
        .item{
            width: 20rpx;
            height: 45rpx;
            font-family: PingFangSC-Regular;
            font-size: 32rpx;
            color: #FFFFFF;
            margin-top: 7rpx;
            &:nth-of-type(1){
                margin-top: 60rpx;
            }
            &:nth-of-type(4){
                margin-top: 40rpx;
            }
            &:nth-of-type(7){
                margin-top: 30rpx;
            }
        }
    }
    .right{
        flex: 1;
        // width: 624rpx;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        flex-wrap: wrap;
        margin-left: 10rpx;
        margin-top: 30rpx;
        .item{
            width: 40rpx;
            height: 40rpx;
            margin-left: 10rpx;
            margin-bottom: 10rpx;
            opacity: 0.6;
            background: #D8D8D8;
            border-radius: 6rpx;
            &:nth-of-type(4n+5){
                margin-left: 20rpx;
            }
            &:nth-of-type(12n+1){
                margin-left: 10rpx;
            }
            &:nth-of-type(n+25):nth-of-type(-n+36){
                // background-color: red;
                margin-bottom: 30rpx;
            }
            &:nth-of-type(n+61):nth-of-type(-n+72){
                // background-color: red;
                margin-bottom: 30rpx;
            }
            &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(11),&:nth-of-type(12),&:nth-of-type(13), &:nth-of-type(24){
                visibility: hidden;
            }
            
        }
        .not-selected{
            background: #F9C34A;
        }
        .selected{
            background: #6548A9;
        }
    }
}

.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 750rpx;
    height: 238rpx;
    background: #33363D;
    .recommend{
        display: flex;
        justify-content: center;
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #FFFFFF;
        .text{

        }
        .item{
            margin-left: 24rpx;
            width: 104rpx;
            height: 46rpx;
            line-height: 46rpx;
            text-align: center;
            opacity: 0.53;
            border: 2rpx solid #979797;
        }
        .active{
            background-color: #6548a9;
        }
    }
    .please-choose-seat{
        margin-top: 60rpx;
        width: 670rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        opacity: 0.44;
        background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
        box-shadow: 0 0 8rpx 2rpx rgba(242,109,125,0.18);
        border-radius: 12rpx;
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #FFFFFF;
     
        
    }
}
